<script>
    export default {
        name:"MyDown",
        data(){
            return {
                todos:[]
            }
        },
        computed:{
            doneNum(){
                return this.todos.length == 0?0:this.todos.filter(e=>e.done).length
            }
        },
        mounted(){
            this.$bus.on('Todos',data=>{
                this.todos = data;
                    //检查是否全选
                let isAll = true;
                this.todos.forEach(e=>{
                    if(!e.done)isAll = false;
                })
                //操作全选按钮
                this.$refs.doneAllBox.checked = isAll;
            });
            
        },
        methods:{
            delDone(){
                if(confirm('确认要删除所有已完成的待办吗？')){
                    this.$bus.emit('delByDone')
                }
            },
            done(){
                this.$bus.emit('done',this.$refs.doneAllBox.checked);
            }
        }
    }
</script>
<template>
    <div id="downKj">
        <input type="checkbox" name="" id="selAll" @click="done()" ref="doneAllBox" >
        <span id="info">
            待办项：<span style="color:red">{{doneNum}}</span>/{{todos.length}}
        </span>
        <span id="space">

        </span>
        <button id="delDone_bt" @click="delDone">
            删除已完成
        </button>
    </div>
</template>
<style>
    #downKj{
        display: flex;
        margin-top: 2vh;
        height: 3vh;
        line-height: 3vh;
    }
    #selAll{
        flex: 1;
        display: inline-block;
        width: 30px;
        height: 30px;
        position: relative;
        top: -4px;
    }
    #selAll:hover{
        cursor: pointer;
    }
    #info{
        flex: 2;
    }
    #space{
        flex: 3;
    }
    #delDone_bt{
        flex: 1;
        background-color: rgba(255, 0, 0, 0.959);
        border: 1px solid gray;
        border-radius: 4px;
        color: rgb(255, 255, 0);
    }
    #delDone_bt:hover{
        cursor: pointer;
        box-shadow: 2px 2px 3px rgba(128, 128, 128, 0.5);
    }

</style>